<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="../js/vue.js"></script>
  <title>组件化</title>
</head>
<body>
  <div id="root">
    <!-- 3. 使用组件 -->
    <!-- <tit></tit> -->
    <my-tit></my-tit>
    <hr>
    <div >{{number}}</div>
  </div>
  <script type="text/javascript">
    // 1. 利用 Vue.extend() 创建组件
    const tit = Vue.extend({
      data() {
        return {
          con:"组件化基本流程（注意事项）"
        }
      },
      template:`
				<>
					<h3>{{con}}</h3>
        </>
			`
    })

    const vm = new Vue({
      el:'#root', 
      data:{ 
        number:1
      },
      // 2. 注册组件
      components:{
        // 注册组件名（） 有两种写法 my-tit / MyTit，MyTit只在脚手架中有效

        'my-tit':tit
        // MyTit:tit
      }
    }) 
  </script>
</body>
</html>